<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head">
				<hx-navbar ref="hxnb" :config="config"></hx-navbar>
			</view>
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="companyList" @markertap="bindCompanyJobs" @callouttap="bindCompanyJobs"></map>
			<view class="top_nav">
				<view class="flex-box">
					<view class="switch ac">全职</view>
					<!-- <view class="switch ml10">零工</view> -->
					<view class="search_nav flex-box">
						<input type="text" placeholder="请输入位置或公司" confirm-type="search" v-model="query.q" @confirm="search" class="flex-grow-1 fs28 pr20 col0"
							placeholder-class="colb" />
						<image src="https://admin.mosizp.cn/static/public/icon_search.png" mode="aspectFill" class="ico28" @click="search"></image>
					</view>
				</view>
				<scroll-view scroll-x="true" class="mid_tab clearfix">
					<view class="welfare_item" :class="{ac:query.distance==item}" @click="bindDistanceChange(item)" v-for="(item,index) in nearbyOptions">{{item}}km内</view>
				</scroll-view>
				<!-- <view class="pop_tab_nav flex-box">
					<view class="flex-grow-1 flex-box" @click="chooseItem(0)">
						<view class="fs28 col3">区域</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" mode="widthFix" class="ico13 ml20"></image>
					</view>
					<view class="flex-grow-1 flex-box" @click="chooseItem(1)">
						<view class="fs28 col3">类别</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" mode="widthFix" class="ico13 ml20"></image>
					</view>
					<view class="flex-grow-1 flex-box" @click="chooseItem(2)">
						<view class="fs28 col3">薪资</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" mode="widthFix" class="ico13 ml20"></image>
					</view>
					<view class="flex-box" @click="chooseItem(3)">
						<view class="fs28 col3">其他</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_up.png" mode="widthFix" class="ico13 ml20"></image>
					</view>
				</view> -->
				<template v-if="filterIndex==1">
					<view class="pop_scroll i">
						<scroll-view scroll-y class="pop_left">
							<view class="item m-ellipsis active">选项一</view>
							<view class="item m-ellipsis">选项一</view>
							<view class="item m-ellipsis">选项一</view>
							<view class="item m-ellipsis">选项一</view>
							<view class="item m-ellipsis">选项一</view>
							<view class="item m-ellipsis">选项一</view>
							<view class="item m-ellipsis">选项一</view>
						</scroll-view>
						<scroll-view scroll-y="true" class="pop_right pl30">
							<view class="scroll_item m-ellipsis active">不限</view>
							<view class="scroll_item m-ellipsis">3-4K</view>
							<view class="scroll_item m-ellipsis">4-6K</view>
							<view class="scroll_item m-ellipsis">6-8K</view>
							<view class="scroll_item m-ellipsis">8-12K</view>
						</scroll-view>
					</view>
				</template>
				<scroll-view scroll-y="true" class="pop_scroll" v-if="filterShow&&filterIndex!=1">
					<template v-if="filterIndex==0">
						<view class="city_item" :class="{active:query.district_id==-1}"
							@click="bindSearchChange('district_id',-1)">不限</view>
						<view class="city_item" @click="bindSearchChange('district_id',item.id)"
							:class="{active:query.district_id==item.id}" v-for="(item,index) in districts">{{item.name}}
						</view>
					</template>
					<template v-if="filterIndex==3">
						<view class="pt20"></view>
						<view class="fs32 fwb col3">年龄要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis active">不限</view>
							<view class="scroll_item m-ellipsis">16-20岁</view>
							<view class="scroll_item m-ellipsis">20-30岁</view>
							<view class="scroll_item m-ellipsis">30-35岁</view>
							<view class="scroll_item m-ellipsis">35-40岁</view>
							<view class="scroll_item m-ellipsis">40-45岁</view>
							<view class="scroll_item m-ellipsis">45-50岁</view>
						</view>
						<view class="fs32 fwb col3 mt35">性别要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis active">不限</view>
							<view class="scroll_item m-ellipsis">男</view>
							<view class="scroll_item m-ellipsis">女</view>

						</view>
						<view class="fs32 fwb col3 mt35">学历要求</view>
						<view class="pt15">
							<view class="scroll_item m-ellipsis active">不限</view>
							<view class="scroll_item m-ellipsis">初中</view>
							<view class="scroll_item m-ellipsis">高中</view>
							<view class="scroll_item m-ellipsis">中专</view>
							<view class="scroll_item m-ellipsis">大专</view>
						</view>
					</template>
					<view class="pt30"></view>

					<view class="pop_bottom flex-box">
						<view class="bt1">重置</view>
						<view class="bt2" @click="closeSoft">确认</view>
					</view>
				</scroll-view>


			</view>

			<scroll-view scroll-x class="bottom_nav" v-if="jobs.length>0">
				<navigator class="post_item" v-for="(item,index) in jobs" @click="jobDetail(item.id)">
					<view class="flex-box">
						<view class="fwb fs36 col3 m-ellipsis pr15 maxw60">{{item.job_name}}</view>
						<view class="urgent" v-if="item.in_hurry">急聘</view>
						<view class="flex-grow-1 tr fs32 fwb col4">{{item.salary_text}}</view>
					</view>
					<view class="mt15 col6 fs24">{{item.enterpriseinfo.company_name}}</view>
					<view class="clearfix pt10">
						<view class="tips_item">{{item.education_level.name}}</view>
						<view class="tips_item" v-for="benefit in item.benefits">{{benefit.name}}</view>
					</view>
					<view class="mt30 flex-box">
						<image :src="cdnurl(item.user.avatar)" mode="aspectFill" class="cover"></image>
						<view class="flex-grow-1 plr10 m-ellipsis fs22 col6">{{item.user.nickname}}</view>
						<view class="fs22 cola5"> {{item.locations[0].city.name+" "+item.locations[0].district.name}}</view>
					</view>
				</navigator>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				config: {
					color: '#101010',
					back: true,
					title: '地图找工作',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#000', '#000']],
				},
				districts: [],
				filterIndex: '-1',
				filterShow: false,
				query: {
					q: '',
					//pos: '121.1242599,31.1497898',
					pos: '',
					district_id: 0,
					distance: 5
				},
				companyList: [],
				jobs: [],
				latitude: '',
				longitude: '',
				nearbyOptions: [1, 3, 5, 10,20],
			}
		},
		onLoad() {
			
			this.$util.getAreas(null, false).then(districts => {
				this.districts = districts;
			});
			//获取定位
			this.$core.getLatLng({
				success: res => {
					this.query.pos = res.longitude + ',' + res.latitude;
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.fetchCompany();
				},
				fail: ret => {
					this.fetchCompany();
				}
			})
		},
		methods: {
			chooseItem(index) {
				this.filterIndex = index;
				if (index == 1) {
					this.refresh();
				}
				// else if(index == 2){
				// 	this.query.sort = 'budget';
				// 	this.refresh();
				// }
				else {

				}
				this.filterShow = !this.filterShow
			},
			bindClose() {
				this.filterShow = false
				this.filterIndex = '-1'
			},
			//栏目搜索
			bindSearchChange(field, value) {
				this.query[field] = value;
				this.bindClose();
				this.refresh();
			},
			search(){
				this.fetchCompany();
			},
			bindDistanceChange(distance){
				this.query.distance = distance;
				this.fetchCompany();
				this.$forceUpdate()
			},
			fetchCompany: function() {
				let query = this.query;
				query.map=1;
				let page=this;
				this.$core.get({url: 'xilujob.company/lists',data: query,loading: false,
					success: ret => {
					
						let markers = [];
						for(let i=0;i<ret.data.length;i++){
							markers.push({
								id: ret.data[i].id,
								latitude: Number(ret.data[i].enterpriseinfo.lat),
								longitude: Number(ret.data[i].enterpriseinfo.lng),
								iconPath: page.iconPath('/location.png'),
								width: 28,
								height: 19,
								callout: {
									content: ret.data[i].enterpriseinfo.company_name, //文本
									color: '#000000', //文本颜色
									borderRadius: 3, //边框圆角
									borderWidth: 1, //边框宽度
									borderColor: '#ffffff', //边框颜色
									bgColor: '#ffffff', //背景色
									padding: 5, //文本边缘留白
									display: "ALWAYS",
									textAlign: 'center' //文本对齐方式。有效值: left, right, center
								}
							});
						}
						
						this.companyList = markers;
					}
				});
			},
			//企业职位
			bindCompanyJobs(event) {
				let companyId = event.detail.markerId;
				this.$core.get({url:'xilujob.company/jobs',data:{company_id: companyId},
				success:(ret)=>{
					if(ret.data.jobs.length <= 0){
						uni.showToast({title:"公司暂无职位",icon: 'none'});
						return;
					}
					this.jobs = ret.data.jobs
				}});
			},
			jobDetail(id) {
				uni.navigateTo({
					url: '/pages/user/post_info?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: 1;
	}

	.w100 {
		width: 100%;
	}

	.top_nav {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 6rpx;
		top: 186rpx;
		left: 30rpx;
		position: fixed;
		z-index: 99;
		padding: 25rpx 30rpx 30rpx;

		.switch {
			width: 102rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666666;
			background: #E8EAEF;
			border-radius: 43rpx;

			&.ac {
				background: var(--primary);
				color: #FFFFFF;
			}
		}

		.search_nav {
			width: 397rpx;
			height: 70rpx;
			background: #F7F8FB;
			border-radius: 43rpx;
			padding-left: 25rpx;
			padding-right: 35rpx;
			margin-left: 20rpx;
		}
	}

	.pop_tab_nav {

		padding-top: 30rpx;
	}

	.pop_scroll {
		height: 400rpx;
		padding: 0 0 0 45rpx;
		position: relative;

		&.i {
			padding:20rpx 0 0;
		}

		.pop_left {
			width: 200rpx;
			height: 100%;
			float: left;
			background: #fff;
		}

		.pop_left .item {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding-right: 20rpx;
			padding-left: 40rpx;
			color: #333333;
			position: relative;
			font-size: 28rpx;
		}

		.pop_left .item.active {
			color: var(--primary);
		}

		.pop_left .item.active::after {
			content: '';
			position: absolute;
			z-index: 1;
			width: 5rpx;
			height: 80rpx;
			display: block;
			left: 10rpx;
			top: 50%;
			transform: translateY(-50%);
			background: var(--primary);
			border-radius: 5rpx;
		}

		.pop_right {
			float: left;
			width: 430rpx;
			height: 100%;
			background: #F6F8FE;
		}

		.scroll_item {
			border: 1px solid #F5EEEE;
			width: 152rpx;
			height: 65rpx;
			line-height: calc(65rpx - 2px);
			text-align: center;
			color: #666666;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-right: 15rpx;
			margin-top: 20rpx;
			padding: 0 10rpx;
			display: inline-block;
			vertical-align: top;

			&.active {
				border: 1px solid var(--primary);
				color: var(--primary);
			}
		}
	}

	.pop_bottom {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		padding-left: 45rpx;
		padding-right: 30rpx;

		.bt1 {
			width: 152rpx;
			height: 74rpx;
			background: rgba(0, 103, 211, .1);
			border-radius: 8rpx;
			font-size: 28rpx;
			color: var(--primary);
			line-height: 74rpx;
			text-align: center;
		}

		.bt2 {
			margin-left: 35rpx;
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			background: var(--primary);
			border-radius: 8rpx;
		}
	}

	.city_item {

		font-size: 26rpx;
		color: #333333;
		line-height: 100rpx;

		&.active {
			font-weight: bold;
			color: var(--primary);
		}
	}

	.bottom_nav {
		bottom: 40rpx;
		width: 100%;
		left: 0;
		position: fixed;
		z-index: 99;
		white-space: nowrap;

		.item {}
	}

	.post {
		&_list {
			padding-top: 10rpx;
		}

		&_item {
			width: 610rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 18rpx;
			margin-right: 30rpx;
			padding: 30rpx;
			display: inline-block;
			vertical-align: top;

			&:first-child {
				margin-left: 30rpx;
			}

			.maxw60 {
				max-width: 60%;
			}

			.urgent {
				width: 74rpx;
				height: 37rpx;
				line-height: 33rpx;
				text-align: center;
				font-size: 24rpx;
				color: #FF7B20;
				border-radius: 6rpx;
				border: 2rpx solid #FF7B20;
			}

			.tips_item {
				height: 32rpx;
				background: #ECEFF5;
				border-radius: 4rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #A5A5A5;
				line-height: 32rpx;
				display: inline-block;
				vertical-align: top;
				margin-right: 10rpx;
				margin-top: 10rpx;
				padding: 0 8rpx;
			}

			.cover {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}
	.mid_tab{
		height: 40rpx;
		margin-top: 30rpx;
	}
	.welfare_item {
		font-size: 22rpx;
		color: #999;
		float: left;
		border-radius: 8rpx;
		line-height: 39rpx;
		background-color: #F7F7F7;
		margin-right: 20rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		&.ac {
			background: var(--primary);
			color: #FFFFFF;
		}
	}
</style>